import { FetchConfigProps, fetchData } from "@/common/fetch";
import Link from "next/link";
import React from "react";

export default async function RequestList({
  renderFunc,
  config,
  searchParams,
  pageSize = 10,
}: {
  renderFunc: (list: Array<unknown>) => React.ReactNode;
  config: {
    url: string;
    options?: FetchConfigProps;
  };
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  searchParams: any;
  pageSize?: number;
}) {
  const searchParamsObj = await searchParams;
  const currentPage = Number(searchParamsObj?.page) || 1;
  try {
    const result = await fetchData(config.url, {
      method: config?.options?.method || "GET",
      data: {
        page: currentPage,
        limit: pageSize,
      },
    });
    console.log('....>',result);
    const { list=[], total } = result.data
    const totalPages = Math.ceil(total / pageSize);
    const hasPrev = currentPage > 1;
    const hasNext = currentPage < totalPages;
    return (
      <div className="mt-8">
        {renderFunc(list)}
        <div className="flex justify-center gap-4 items-center mt-4">
          <span>共 {total} 条</span>
  
          <Link
            href={`?${new URLSearchParams({
              ...searchParamsObj,
              page: String(currentPage - 1),
            })}`}
            className={`px-4 py-2 rounded ${
              hasPrev
                ? "bg-blue-500 text-white"
                : "bg-gray-300 cursor-not-allowed pointer-events-none"
            }`}
            aria-disabled={!hasPrev}
          >
            上一页
          </Link>
  
          {/* <span>
            第 {currentPage} 页 / 共 {totalPages} 页
          </span> */}
  
          <Link
            href={`?${new URLSearchParams({
              ...searchParamsObj,
              page: String(currentPage + 1),
            })}`}
            className={`px-4 py-2 rounded ${
              hasNext
                ? "bg-blue-500 text-white"
                : "bg-gray-300 cursor-not-allowed pointer-events-none"
            }`}
          >
            下一页
          </Link>
        </div>
      </div>
    );
  } catch (err) {
    console.log(err);
    return <div>Ooooooooooooooooooooooooooooooops! 私密马赛</div>
  }
}
